---
title: Добавление интеграций
i18nReady: true
---

import IntegrationsNav from '~/components/IntegrationsNav.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components'


**Интеграции Astro** добавляют новый функционал и возможности в ваш проект всего за несколько строк кода. Вы можете написать собственную интеграцию, использовать официальную интеграцию или интеграцию, созданную сообществом.

Интеграции могут...

- Добавить React, Vue, Svelte, Solid и другие популярные фреймворки пользовательского интерфейса.
- Интегрировать такие инструменты, как Tailwind и Partytown, с помощью нескольких строк кода.
- Добавлять новые функции в ваш проект, например автоматическую генерацию карты сайта.
- Писать пользовательский код, который встраивается в процесс сборки, серверу разработки и т. д.

:::tip[Каталог интеграций]
Просматривайте или выполняйте поиск по полному набору сотен официальных и общественных интеграций в нашем [каталоге интеграций](https://astro.build/integrations/). Найдите пакеты для добавления в ваш проект Astro для аутентификации, аналитики, производительности, SEO, доступности, пользовательского интерфейса, инструментов разработчика и многого другого.
:::


## Официальные интеграции

Следующие интеграции поддерживаются Astro.

<IntegrationsNav />

## Автоматическая настройка интеграций

Astro включает команду `astro add` для автоматической установки официальных интеграций. Некоторые плагины сообщества также могут быть добавлены с помощью этой команды. Пожалуйста, проверьте в документации к каждой интеграции, поддерживается ли `astro add`, или вы должны [установить вручную](#установка-вручную).

Запустите команду `astro add` с помощью выбранного вами менеджера пакетов, и наш автоматический мастер интеграции обновит ваш конфигурационный файл и установит все необходимые зависимости.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

Можно даже добавить несколько интеграций одновременно!

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react tailwind partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[Обработка интеграционных зависимостей]
Если после добавления интеграции вы видите предупреждения вроде `Cannot find package '[package-name]'`, ваш менеджер пакетов, возможно, не установил для вас [peer зависимости](https://nodejs.org/en/blog/npm/peer-dependencies/). Чтобы установить эти недостающие пакеты, выполните команду `npm install [имя-пакета]`.
:::

### Установка вручную

Интеграции Astro всегда добавляются через свойство `integrations` в вашем файле `astro.config.mjs`.

Существует три основных способа импортировать интеграцию в ваш проект Astro:
1. [Установить интеграцию из пакета npm](#установка-пакета-npm).
2. Импортировать собственную интеграцию из локального файла внутри проекта.
3. Написать свою интеграцию встроенно, прямо в вашем конфигурационном файле.

    ```js
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';

    export default defineConfig({
      integrations: [
        // 1. Импортируется из установленного пакета npm
        installedIntegration(),
        // 2. Импортируется из локального JS-файла
        localIntegration(),
        // 3. Встроенный объект
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    });
    ```

Ознакомьтесь со справочником [API интеграций](/ru/reference/integrations-reference/), чтобы узнать о различных способах написания интеграции.

#### Установка пакета NPM

Установите интеграцию пакета NPM с помощью менеджера пакетов, а затем обновите `astro.config.mjs` вручную.

Например, чтобы установить интеграцию `@astrojs/sitemap`:

<Steps>
1. Установите интеграцию в зависимости проекта с помощью предпочитаемого менеджера пакетов:

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. Импортируйте интеграцию в файл `astro.config.mjs` и добавьте ее в массив `integrations[]` вместе с любыми параметрами конфигурации:

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    Обратите внимание, что у разных интеграций могут быть разные настройки конфигурации. Прочитайте документацию по каждой интеграции и примените все необходимые параметры конфигурации к выбранной вами интеграции в файле `astro.config.mjs`.
</Steps>

### Пользовательские опции

Интеграции почти всегда создаются как фабричные функции, которые возвращают фактический объект интеграции. Это позволяет передавать в функцию аргументы и параметры, которые настраивают интеграцию для вашего проекта.

```js
integrations: [
  // Пример: Настройка интеграции с помощью аргументов функции
  sitemap({filter: true})
]
```

### Переключить интеграцию

Интеграции, возвращающие ложные значения, игнорируются, поэтому вы можете включать и отключать интеграции без беспокойства об оставленных `undefined` и булевых значениях.

```js
integrations: [
  // Пример: Пропуск создания карты сайта в Windows
  process.platform !== 'win32' && sitemap()
]
```

## Обновление интеграций

Чтобы обновить все официальные интеграции сразу, выполните команду `@astrojs/upgrade`. Это приведет к обновлению Astro и всех официальных интеграций до последних версий.

### Автоматическое обновление

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Обновление Astro и официальных интеграций до последних версий
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Обновление Astro и официальных интеграций до последних версий
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Обновление Astro и официальных интеграций до последних версий
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### Обновление вручную

Чтобы обновить одну или несколько интеграций вручную, используйте соответствующую команду для вашего менеджера пакетов.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Пример: обновление интеграций React и Tailwind
  npm install @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Пример: обновление интеграций React и Tailwind
  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Пример: обновление интеграций React и Tailwind
  yarn add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
</PackageManagerTabs>

## Удаление интеграции

Чтобы удалить интеграцию, сначала удалите ее из проекта

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm uninstall @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm remove @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn remove @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

Далее удалите интеграцию из файла `astro.config.*`:

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
});
```

## Поиск Дополнительных Интеграций

Вы можете найти множество интеграций, разработанных сообществом, в [Каталоге Интеграций Astro](https://astro.build/integrations/). Переходите по ссылкам, чтобы получить подробные инструкции по использованию и настройке.

## Создание Собственной Интеграции

API Интеграции Astro вдохновлен Rollup и Vite и разработан так, чтобы быть знакомым любому, кто когда-либо писал плагин Rollup или Vite.

Ознакомьтесь со справочником [по API Интеграций](/ru/reference/integrations-reference/), чтобы узнать, что могут делать интеграции и как написать свою собственную.